<template>
    <div class="indexWrap">
        <!--头部栏 开始-->
        <header :class="!isCollapse ? 'topWrap' : 'fullTopWrap'">

            <div class="header-box">
                <div class="tab-box">
                    <el-tabs
                        v-model="currentTab"
                        @tab-click="handleClickTab"
                        @tab-remove="handleDelTab"
                        closable
                        type="card"
                    >
                        <template v-for="(tab,index) in elTabs">
                            <el-tab-pane
                                :key="index"
                                :label="tab.name"
                                :name="tab.route">
                            </el-tab-pane>
                        </template>
                    </el-tabs>
                </div>
                <div class="user-info">
                    <span>欢迎您，{{nickName}}</span>
                    <el-popover
                        placement="bottom-start"
                        width="40"
                        trigger="hover">
                    <div class="info-box">
                        <div @click="changePswDialog = true">修改密码</div>
                        <div @click="loginOut">退出登录</div>
                    </div>
                    <span slot="reference">
                        <i class="down-icon" ></i>
                    </span>
                    </el-popover>
                </div>
            </div>
        </header>

        <div class="middleWrap">
            <!-- 左侧菜单 -->
            <elMenu @getTags = 'getTags' @getCollapse="getCollapse"></elMenu>
            <div class="right">
                <router-view class="routerView"></router-view>
            </div>
        </div>
    </div>
</template>

<script>
    import { mapGetters, mapMutations } from 'vuex'
    import session from '../utils/session'
    import elMenu from '../components/Menu'
    export default {
        components: {
            elMenu
        },
        data () {
            return {
                nickName: session.get('nickName') || '管理员',
                changePswDialog: false,
                elTabs: [],
                isCollapse: false,
                currentTab: ''
            }
        },
        computed: {
            currentRoute () {
                return this.$route.path
            },
            ...mapGetters([
                'vuexTags'
            ])
        },
        watch: {
            currentRoute (val) {
                this.currentTab = val
            }

        },
        methods: {
            ...mapMutations({
                setTags: 'tags'
            }),
            // 退出登入
            loginOut () {
                session.clearAll()
                this.$router.push({ path: '/login' })
            },
            setPsw (val) {
                console.log(val, 'ccccccccc')
            },
            getTags (tags) { // 菜单组件传过来的动态面包屑
                this.elTabs = tags
                this.currentTab = this.currentRoute // 默认高亮面包屑
            },
            getCollapse (isCollapse) { // 获得是否伸缩菜单
                this.isCollapse = isCollapse
            },
            handleClickTab (tab) { // 点击面包屑，跳转到相应路由
                console.log(tab, 'ttt')
                this.$router.push({ path: tab.name })
            },
            handleDelTab (tabUrl) { // 删除面包屑，跳到历史前一个面包屑
                let tags = this.vuexTags
                if (tabUrl === this.currentRoute) { // 判断关闭的tab是否是当前页面，是，go（-1），否，关掉当前,不做跳转
                    let goUrl
                    for (let i = 0; i < tags.length; i++) {
                        if (tabUrl === tags[i].route) {
                            goUrl = tags[i - 1].route
                        }
                    }
                    goUrl && this.$router.push({ path: goUrl })
                }

                let newTags = tags.filter(tab => {
                    if (tabUrl !== tab.route) {
                        return tab
                    }
                })
                session.set('tags', newTags)
                this.setTags(newTags)
                this.elTabs = this.vuexTags
            }
        },
        mounted () {
        }
    }
</script>

<style scoped>
  @import "../assets/css/index.css";
</style>
<style lang="scss">
  @import "../assets/css/default.scss";
</style>
